<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <link rel="stylesheet" href="../../layui/css/formSelects-v4.css">
    <script src="../../layui/layui.js"></script>
    <script src="../../js/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/vue.js"></script>

</head>
<body>
<div id="story">
    <input type="hidden" name="glId" id="glId" :value="garden_list.glId">
    <input type="hidden" :value="garden_list.glName" id="gradeName">
    <h2>幼儿学生管理</h2>
    <hr/>
    <hr/>
    <form action="" class="layui-form">
        <div class="layui-form-item">

            <div class="layui-inline">
                <label class="layui-form-label">年级</label>
                <div class="layui-input-inline" style="width: 200px;">
                    <select id="grade" lay-filter="grade">
                        <option value="-1">请选择</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline" style="margin-right: 0px;">
                <label class="layui-form-label">班级</label>
                <div class="layui-input-inline" style="width: 200px;">
                    <select id="manage">
                        <option value="-1">请选择</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline" style="margin-right: 0px;">
                <label class="layui-form-label">幼儿姓名</label>
                <div class="layui-input-inline">
                    <input type="text" id="pName" name="pName" autocomplete="off" class="layui-input">
                </div>
            </div>
            <button type="button" class="layui-btn" onclick="reloadData()" lay-submit="" lay-filter="demo1">查询</button>
        </div>
    </form>



    <table class="layui-hide" id="childList" lay-filter="childTable"></table>
</div>

<script>
    var table ;
    function reloadData(){
       /* console.log($("#grade").val());
        console.log($("#manage").val());*/
        //执行重载
        table.reload('childList', {
            page: {
                curr: 1 //重新从第 1 页开始
            }
            ,where: {
                pName : $("#pName").val(),
                "gradeId":$("#grade").val(),
                "cmId":$("#manage").val(),
            }
        });
    }

    layui.config({
        base: '../../layui/'
    }).extend({
        formSelects: 'formSelects-v4'
    });

    layui.use(['table','form','formSelects','laydate'], function(){
        table = layui.table;
        var form = layui.form;
        var select = layui.formSelects;
        var laydate = layui.laydate;

        table.render({
            elem: '#childList'
            ,url:'http://localhost:9999/Child/index?glId='+$("#glId").val()
            ,page: true
            ,even : true
            ,id : "childList"
            ,toolbar:"#toolbarDemo",
            defaultToolbar: []
            ,cols: [[
                {field:'hello',type:'checkbox'}
                ,{field:'pid', title: '编号'}
                ,{field:'pName', title: '幼儿姓名'}
                ,{field:'pSex',  title: '性别'}
                ,{field:'hobby', title: '兴趣爱好'}
                ,{field:'home', title: '家庭住址'}
                ,{field:'pimg', title: '图片',hide:true}
                ,{field:'pNation', title: '民族'}
                ,{field:'grade',  title: '所在年级',templet:function (d) {
                        return d.grade.gradeName;
                    }}
                ,{field:'manage',  title: '所在班级',templet:function (d) {
                        return d.manage.cmName;
                    }}
                ,{field:'eDate', title: '入园时间',hide:true}
                ,{field:'state', title: '状态'}
                ,{field:'pDate', title: '出生日期',}
                ,{field:'contact', title: '联系方式'}
                ,{field:'pDrop', title: '是否退学',hide:true}
                ,{field:'dpay', title: '是否缴费'}
                ,{field:'cRemarks', title: '备注',hide:true},
                {toolbar: '#barDemo'}
            ]]
        });

        //监听行内的工具条
        table.on('tool(childTable)',function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if (layEvent == 'del') {
                        $.get("http://localhost:9999/Recruit/cNamegetCid",{cName:data.pName},function (cid) {
                          $.get("http://localhost:9999/Recruit/updbycidtostate2",{cid:cid},function (da) {
                                $.get('http://localhost:9999/Child/childDelete',{pid: data.pid},function () {
                                layer.close(layer.index);
                                table.reload('childList');
                            })
                    })
                })
            }
            if (layEvent === 'edit'){
                $.get('update.html?_'+new Date().getTime(),function (s) {
                    layer.open({
                        type : 1,
                        title : '编辑幼生',
                        scrollbar: false,
                        skin : 'layui-layer-molv',
                        anim:5,
                        area : '1050px',
                        content:s,
                        btn : ['确定','取消'],
                        success:function(){
                            //对表单回填数据
                            data.pDrop = data.pDrop == '否' ? null : '是';
                            data.dpay = data.dpay == '否' ? null : '是';
                            console.log(data.pid);
                            $.get('http://localhost:9999/Parents/getbypid',{pid:data.pid},function (pd) {

                                console.log(pd.length);
                                if (pd.length == 2){
                                    $("#jhr2").slideDown(150);
                                    $("#j").attr("checked","true").val("是");
                                    form.render('checkbox');
                                }
                                var time11 = setInterval(function () {
                                    if ( $("#fpCmode").attr('placeholder') != null){
                                        for (let i = 0; i < pd.length; i++) {
                                            $(".guanxi:eq("+i+")").val(pd[i].guanxi);
                                            $(".pcName").eq(i).val(pd[i].pcName)
                                            $(".pCmode").eq(i).val(pd[i].pCmode)
                                        }
                                        layui.form.render();
                                        clearInterval(time11);
                                    };
                                },200)
                            })
                            console.log(data);
                            form.val('childForm',data);
                            $("#demo1").attr("src","../../images/child/"+data.pimg);
                            console.log($("#pDrop").val());
                            var glId = $("#glId").val();

                            $.get("http://localhost:9999/Grade/gradeIndex",{gIId:$("#glId").val()},function(data){
                                $.each(data,function(){
                                    var opt = $("<option></option>").appendTo("#gradeId");
                                    opt.text(this.gradeName).val(this.gradeId);
                                });
                                layui.form.render();
                            });

                            var a = data.hobby.split(",");
                            for (let i = 0; i < a.length; i++) {
                               if (a.length == 1){
                                   if (a[i]=="唱歌"){
                                       $(":checkbox[name='hobby'][value='唱歌']").attr("checked","true");
                                   } else{
                                       $(":checkbox[name='hobby'][value='唱歌']").removeAttr("checked");
                                       $(":checkbox[name='hobby'][value='"+a[i]+"']").attr("checked","true");
                                   }
                               }else{
                                   if (data.hobby.indexOf('唱歌') != -1){
                                       $(":checkbox[name='hobby'][value='"+a[i]+"']").attr("checked","true");
                                   } else{
                                       $(":checkbox[name='hobby'][value='唱歌']").removeAttr("checked");
                                       $(":checkbox[name='hobby'][value='"+a[i]+"']").attr("checked","true");
                                   }
                               }
                            }
                            $.get("http://localhost:9999/Manage/manage2",{glId:$("#glId").val(),gradeId: data.grade.gradeId},function(data){
                                $.each(data,function(){
                                    var opt = $("<option></option>").appendTo("#cmId");
                                    opt.text(this.cmName).val(this.cmId);
                                });
                                layui.form.render();
                            });
                            $(":radio[name='glId'][value='"+glId+"']").attr("checked","true");
                            var time1 = setInterval(function () {
                                if($("#gradeId option").length > 1){
                                    $("#gradeId").val(data.grade.gradeId);
                                    layui.form.render();
                                    clearInterval(time1);
                                }
                            },200)
                            var time2 = setInterval(function () {
                                if($("#cmId option").length > 1){
                                    $("#cmId").val(data.manage.cmId);
                                    layui.form.render();
                                    clearInterval(time2);
                                }
                            },200)
                            form.render();
                        },
                        yes : function () {
                            var str = $("#add_child_form").serialize();
                            console.log(str);
                            $.get("http://localhost:9999/Child/childUpdate",str,function () {
                                layer.close(layer.index);
                                layui.table.reload('childList');
                            })
                        }
                    })
                })
            } else if (layEvent === 'detail'){ //TODO 查看详情

            }
        });
        form.on('select(grade)', function(data){
            if (data.value != -1){
            $("#manage").empty();
            $.get("http://localhost:9999/Manage/manage2",{glId:$("#glId").val(),gradeId: data.value},function(data){
                $.each(data,function(){
                    var opt = $("<option></option>").appendTo("#manage");
                    opt.text(this.cmName).val(this.cmId);
                });
              layui.form.render();
            });
            }else{
                $("#manage").empty();
                $.get("http://localhost:9999/Manage/manageIndex",{glId:$("#glId").val()},function(data){
                    $.each(data.data,function(){
                        var opt = $("<option></option>").appendTo("#manage");
                        opt.text(this.cmName).val(this.cmId);
                    });
                    layui.form.render();
                });
            }
        })

        //头工具栏事件
        table.on('toolbar(childTable)', function(obj){
            var h = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    $.get("add.html",function (data) {
                        layer.open({
                            type : 1,
                            title : '添加幼生',
                            scrollbar: false,
                            skin : 'layui-layer-molv',
                            anim:4,
                            area : '1050px',
                            content : data,
                            btn : ['确定','取消'],
                            success:function(){
                               var glId = $("#glId").val();
                               $(":radio[name='glId'][value='"+glId+"']").attr("checked","true");
                                $.get("http://localhost:9999/Grade/gradeIndex",{gIId:$("#glId").val()},function(data){
                                    $.each(data,function(){
                                        var opt = $("<option></option>").appendTo("#gradeId");
                                        opt.text(this.gradeName).val(this.gradeId);
                                    });
                                    layui.form.render();
                                });
                                form.on('select(gradeId)', function(data){
                                    if (data.value != -1){
                                        $("#cmId").empty();
                                        var opt = $("<option></option>").appendTo("#cmId");
                                        opt.text("请选择所在班级").val("-1");
                                        $.get("http://localhost:9999/Manage/manage2",{glId:$("#glId").val(),gradeId: data.value},function(data){
                                            $.each(data,function(){
                                                var opt = $("<option></option>").appendTo("#cmId");
                                                opt.text(this.cmName).val(this.cmId);
                                            });
                                            layui.form.render();
                                        });
                                    }
                                    if (data.value == -1) {
                                        $("#cmId").empty();
                                        $("#cmId").val(-1);
                                    }

                                })
                               /* laydate.render();*/
                            },
                            yes : function () {
                            if ($("#pNamea").val() == -1){
                                layer.msg('请选择名称', {icon: 5});
                                }
                                if ($("#gradeId").val() == -1){
                                    layer.msg('请选择所在年级', {icon: 5});
                                }
                                if ($("#cmId").val() == -1){
                                    layer.msg('请选择所在班级', {icon: 5});
                                }
                                if ($("#pNamea").val() != -1 && $("#gradeId").val() != -1 && $("#cmId").val() != -1){
                                var str = $("#add_child_form").serialize();

                                $.post("http://localhost:9999/Child/childAdd",str,function (data) {
                                    if (rstateCid != ""){
                                   $.get("http://localhost:9999/Recruit/updbycidtostate",{cid:rstateCid},function (da) {
                                       layer.close(layer.index);
                                       table.reload('childList');
                                   })
                                    }

                                });
                            }
                            }
                        })

                    });
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;
            };
        });

    });
    var time9 = setInterval(function () {
        if ($("#glId").val() != ""){
            $.get("http://localhost:9999/Grade/gradeIndex",{gIId:$("#glId").val()},function(data){
                $.each(data,function(){
                    var opt = $("<option></option>").appendTo("#grade");
                    opt.text(this.gradeName).val(this.gradeId);
                });
                layui.form.render();
            });

            $.get("http://localhost:9999/Manage/manageIndex",{glId:$("#glId").val()},function(data){
                $.each(data.data,function(){
                    var opt = $("<option></option>").appendTo("#manage");
                    opt.text(this.cmName).val(this.cmId);
                });
               layui.form.render();
            });
            clearInterval(time9);
        }
    },100)
    var vm = new Vue({
        el:'#story',
        data:{
            garden_list:null
        },
        created:function () {
            var User_PermissionData = JSON.parse(sessionStorage.getItem("login_user"));
            this.garden_list = User_PermissionData.kmsUser.garden_list;
            /*if (a == null){
                this.garden_listName = '总部';
            } else {
                this.garden_listName=a.glName;
            }*/
        },
    })
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-circle"></i> 添加</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a lay-event="edit"><i class="layui-icon layui-icon-edit"></i></a>
    <a lay-event="del"><i class="layui-icon layui-icon-delete"></i></a>
</script>

<script type="text/html" id="shifou">
    <input type="checkbox" name="locked" value="{{d.locked}}" title="启用" lay-filter="roleTable" {{d.locked == 1 ? 'checked' : ''}}>
</script>
<!--<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //常规用法
        laydate.render({
            elem: '#test1'
        });
        laydate.render({
            elem: '#test2'
        });
    });
</script>-->

</body>
</html>